/**
 * OMS供应商选择弹框
 */
import PopupSelection from '../../el/ItemComponent/PopupSelection';
import React from 'react';
import requests from '@/utils/request';
import { ElNotification } from '@/components/el';
import { ElFormProps } from '@/components/el/ElForm';
import { ElSearchTableColumns } from '@/components/el/ElSearchTable';
interface Props {
  value?: any;
  // onChange?: Function;
  defaultUserId?: number | string;
}
interface State {
  popupSelection: any;
}
/**
 * 搜索条件
 */
const getTableSearchFormItems: ElFormProps = {
  wrapperCol: { span: 18 },
  labelCol: { span: 6 },
  items: [
    {
      title: '供应商',
      name: 'keyword',
      span: 6,
      formOption: {
        type: '$input',
        props: { placeholder: '请输入编号/名称' }
      }
    },
    {
      title: '类型',
      name: 'suppType',
      span: 6,
      formOption: {
        type: '$udc',
        props: {
          placeholder: '请选择',
          prefixStr: '/yst-system',
          domain: 'PUR',
          udc: 'SUPP_TYPE2'
        }
      }
    }
  ]
};

/**
 * 表格配置列
 * @returns
 */
const columns = (): Array<ElSearchTableColumns> => [
  {
    title: '编号',
    width: 170,
    dataIndex: 'suppCode',
    align: 'left'
  },
  {
    title: '名称',
    width: 200,
    dataIndex: 'suppName',
    align: 'left'
  },
  {
    title: '简称',
    width: 200,
    dataIndex: 'suppAbbr',
    align: 'center'
  },
  {
    title: '类型',
    width: 200,
    dataIndex: 'suppType2Name',
    align: 'center'
  }
];

// 在此处组装所有的数据

class SuppPopupSelection extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.state = {
      popupSelection: null // 通过ref获取inputValue   popupSelection.state.inputValue
    };
  }

  onRef: any; //组件ref

  /**
   * 分页请求
   * @param formData
   * @returns
   */
  request = async (formData) => {
    return requests('/yst-pur/pur/purSupp/without/permission/search', {
      method: 'post',
      query: {
        ...formData,
        orders: [{ asc: false, column: 'createTime' }]
      }
    });
  };

  /**
   * 分页查询失败回调
   * @param res
   */
  errCallBack = (res) => {
    ElNotification({
      type: 'error',
      message: res.message || res.data || '操作失败！'
    });
  };

  render() {
    return (
      <>
        <PopupSelection
          rowKey='id'
          modalTitle='请选择供应商'
          // scroll={{ x: 'max-content' }}
          tableProxy={{
            request: this.request,
            errCallBack: this.errCallBack,
            props: {
              success: 'success',
              result: 'data.records',
              total: 'data.total'
            },
            autoLoad: true
          }}
          modalTableColumns={columns()}
          columns={columns()}
          searchFormProps={getTableSearchFormItems}
          needModal={true}
          onRef={this.onRef}
          // value={this.props.value}
          // onChange={this.props.onChange}
          overLayWidth={600}
          defaultUserId={this.props?.defaultUserId}
          {...this.props}
        />
      </>
    );
  }
}
export default SuppPopupSelection;
